<template>
	<view>
		<view class="wd-top">
			<view class="cell01">提现至：</view>
			<view class="cell02" v-if="bank != null" @click="mycard">
				<view class="cardbox">
					<image mode="aspectFill" :src="bank.bankIcon"></image>
					<text>{{bank.bankName}}（{{bankNum}}）</text>
				</view>
				<view class="summary">立即到账</view>
			</view>
			<view @click="addcard" class="cell02" v-else>
				<text>请添加银行卡</text>
			</view>
			<view class="cell03">
				<image mode="aspectFill" src="../../static/common/righticon.png"></image>
			</view>
		</view>
		<view class="content">
			<view class="flex_box flex_align flex_between">
				<view class="row01"><text class="label">可提现金额：</text><text class="money">{{accountAmount}}元</text></view>
			</view>
			
		

			<view class="row02">
				<text class="icon">¥</text>
				<view class="price"><input type="number" v-model="takeAmount" placeholder-class="pclass" placeholder="请输入提现金额" /></view>
			</view>
			<view class="row03">
				<text class="left">提现费用：1%税费</text>


				<text class="right" @click="withAll">全部提现</text>
			</view>
			
		</view>

		<view class="login-btn" @click="doing">
			<button>提现</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: true,
				bank: null,
				bankNum: '',
				takeAmount: 0,
				accountAmount: 0
			}
		},

		onLoad() {

		},
		onShow() {
			this.initWithDraw();
			this.account();
		},
		methods: {

			
			withdrawList(){
				
				uni.navigateTo({
					url:'./withdrawalList'
				})
			},
			account() {

				let param = {}
				let that = this;
				this.$api.amount(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {

						that.accountAmount = res.data;

					} else {
						this.$util.$showToast(res.msg, '', 'none');

					}
				})
			},
			withAll() {

				this.takeAmount = parseInt(this.accountAmount);
			},
			initWithDraw() {
				let param = {}
				let that = this;
				this.$api.bankInfo(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {

						that.bank = res.data;
						that.bankNum = res.data.bankNum.substr(res.data.bankNum.length - 4, res.data.bankNum.length);

					} else {
						this.$util.$showToast(res.msg, '', 'none');

					}
				})
			},

			doing() {

				let param = {
					amount: this.takeAmount
				}
				let that = this;
				this.$api.doWithDraw(param).then(res => {

					if (res.code == 1) {
						this.$util.$showToast(res.msg, '', 'none');
						uni.navigateBack({
							delta: 1
						})

					} else {
						this.$util.$showToast(res.msg, '', 'none');

					}
				})

			},

			mycard() {
				uni.navigateTo({
					url: './myCard'
				})
			},
			addcard() {
				uni.navigateTo({
					url: './addCard'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $uni-bg-color;
	}

	.wd-top {
		border-radius: 10rpx;
		background: #FFFFFF;
		margin: 20rpx 30rpx;
		padding: 20rpx 30rpx;
		height: 100rpx;
		display: flex;

		.cell01 {
			font-size: 28rpx;
			color: #333333;
		}

		.cell02 {
			flex: auto;
			font-size: 28rpx;
			color: #CECECE;

			.cardbox {
				image {
					width: 31rpx;
					height: 31rpx;
					vertical-align: middle;
					margin-right: 10rpx;
				}

				text {
					font-size:28rpx;
					color: #333333;
					vertical-align: middle;
				}
			}

			.summary {
				font-size: 28rpx;
				color: #8E8E8E;
				margin-left: 41rpx;
			}
		}

		.cell03 {
			margin-top: 6rpx;

			image {
				width: 37rpx;
				height: 37rpx;
			}
		}
	}

	.content {
		margin: 20rpx 30rpx;
		padding: 30rpx;
		border-radius: 10rpx;
		background: #FFFFFF;

		.row01 {
			.label {
				font-size: 28rpx;
				color: #000000;
			}

			.money {
				font-size: 28rpx;
				color: #333333;
			}
		}

		.row02 {
			margin: 20rpx 0;
			border-bottom: 1rpx solid #efefef;
			display: flex;
			padding: 20rpx 0;

			.icon {
				font-size: 56rpx;
				color: #333333;
				margin-right: 10rpx;
				margin-top: 22rpx;
			}

			.price {
				flex: auto;
				height: 100rpx;
				line-height: 100rpx;

				input {
					font-size: 80rpx;
					height: 100rpx;
					line-height: 100rpx;
					color: #333333;
					font-weight: bold;
				}

				.pclass {
					font-size: 28rpx;
					color: #cecece;
					height: 30rpx;
					line-height: 30rpx;
					font-weight: 400;
					padding-top: 20rpx;
					padding-left: 10rpx;
				}
			}
		}

		.row03 {
			display: flex;

			.left {
				font-size: 26rpx;
				color: #333333;
				flex: auto;
			}

			.right {
				color: #E69825;
				font-size: 26rpx;
			}
		}
	}

	.login-btn {
		margin-top: 70rpx;
		width: 560rpx;
		margin: 0 auto;
		button {
			width: 560rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: $uni-color-primary;
			border-radius: 10rpx;
			color: #FFFFFF;
			margin: 0 auto;
		}
	}
</style>
